<template>
	<view class="">

		<view class="filtration">

			<!-- 筛选 -->
			<view class="acea-row row-middle row-between filtration-menu">
				<view class="acea-row row-middle recently-list">
					<view :class="[recentlyOn==index?'recently-on':'recently']" v-for="(item,index) in recentlyList"
						:key="index" @click="changeRecently(index)">
						{{item.name}} 
					</view>
				</view>
				<!-- 		<view class="acea-row row-middle row-center filter-btn" @click="filterClick">
					<image src="@/static/images/filter_icon.png" mode=""></image>
					<view>筛选</view>
				</view> -->
				<view class="more-btn" @click="toMore('')">
					<!-- <view class="add-icon">＋</view> -->
					<view>全部</view>
				</view>
			</view>
			<view class="module-box service">
				<!-- 			<view class="acea-row row-middle row-between">
							<view class="module-title">供应链</view>
						</view> -->
				<view class="service-list">
					<view class="service-item" v-for="(item,index) in tabTitle" :key="index" @click="toMore(item.id)">
						<image :src="item.icon" mode=""
							style="background: rgba(247, 247, 247, 1);border-radius: 100rpx;">
						</image>
						<view>{{item.name}}({{item.num}})</view>
					</view>
				</view>
			</view>



		</view>
		
		<!-- 我的供应链服务 -->
		<view class="module-box2 demand-box2">
			<view class="acea-row row-middle row-between">
				<view class="module-title">我的招工求职</view>
				<view class="demand-num">{{demandIdx+1 || 0}} / {{needsList.length || 0}}</view>
			</view>
			<view class="demand-swiper">
				<swiper class="swiper-box" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000"
					@change="needsSwiperChange">
					<swiper-item class="swiper-item" v-for="(item,index) in needsList" :key="index">
						<view class="swiper-item">
							<recruit :list="[item]" v-if="item.type == 0" :toZx="false"></recruit>
							<job :list="[item]"  v-else :toZx="false"></job>
						</view>
					</swiper-item>
				</swiper>
			</view>
			</view>
		
		
		<!-- 筛选 -->

		<view class="filtrate-box"
			:style="{backgroundColor:bgcolor,'opacity':show?'1':'0','display':show?'block':'none'}" v-if="filtrateShow">
			<view class="aside">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="dropdown-item" v-for="(item,index) in filtrateArr" :key="index"
						:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+4+'rpx','color':(currentFiltrateAsideIndex==index)?activeColor:itemTextColor}"
						@tap.stop="currentFiltrateAsideIndex=index">{{item.type}}</view>
				</scroll-view>
			</view>
			<view class="conter">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="conter-title"
						:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+4+'rpx'}">
						{{filtrateArr[currentFiltrateAsideIndex].type}}
					</view>
					<view :class="['dropdown-item',currentFiltrateConterIndex==index?'on':'']"
						:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+'rpx','color':(currentFiltrateConterIndex==index)?activeColor:itemTextColor}"
						v-for="(item,index) in filtrateConterArr[currentFiltrateAsideIndex]" :key="index"
						@tap.stop="currentFiltrateConterIndex=index">{{item}}</view>
				</scroll-view>
			</view>
			<view class="acea-row row-middle row-between filtrate-btn">
				<view class="reset" @tap.top="filtrateReset()">重置</view>
				<view class="confirm" @tap.top="filtrateConfirm()">确认</view>
			</view>
		</view>


		<!-- <u-loading-page :loading="loading"></u-loading-page> -->
		<!-- 列表 -->
<!-- 		<view class="list redruit-list">
			<recruit :list="visitInfo" :isIndex="true"></recruit>

		</view>
		<view class='loadingicon acea-row row-center row-middle'>
			<text class='loading iconfont icon-jiazai' :hidden='!loading'></text>{{loadTitle}}
		</view> -->
	</view>
</template>

<script>
	import {
		getRecruitList,
		getRecruitLatesApi,
		getRecruitCategoryNum
	} from '@/api/recruit.js'
	import {
		classificationList
	} from '@/api/subletOfShop.js'
	import {
		getLocation
	} from '@/filters/commFilter.js'

	import {
		getIndustryListApi
	} from '@/api/recruit.js'
	import recruit from "@/components/listItems/recruit.vue"
	import job from "@/components/listItems/job.vue"
	import {
		getObjectListApi,
	} from '@/api/recruit.js'
	export default {
		components: {
			recruit,
			job
		},
		props: {
			city: {
				type: Number,
				default: 0
			},
			tabNavOn: {
				type: Number,
				default: 0
			},
			refsh: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				visitInfo: [],
				tabTitle: [],
				categoryOn: 0,
				isWidth: 40,
				isLeft: 0,
				tabLeft: 0,
				recentlyList: [{name:'招工',id:1}, {name:'求职',id:0}],
				recentlyOn: 0,
				itemHeight: 88,
				itemPadding: 24,
				itemFontSize: 28,
				bgcolor: '#fff',
				activeColor: '#ee212d',
				itemTextColor: '#666',
				barTextColor: '#383838',
				// 筛选
				currentFiltrateAsideIndex: 0,
				currentFiltrateConterIndex: 0,
				show: false,
				filtrateShow: false,
				supplys: [],
				needsList:[],
				demandIdx:0,
				// 筛选数组
				filtrateArr: [{
						type: '地铁',
						list: ['1号线', '2号线']
					},
					{
						type: '区域',
						list: ['岳麓区', '天心区', '开福区', '雨花区']
					}
				],
				filtrateConterArr: [
					['1号线', '2号线', '3号线', '4号线', '5号线', '6号线', '7号线', '2号线', '2号线'],
					['岳麓区', '天心区', '开福区', '雨花区', '雨花区', '雨花区', '雨花区', '雨花区雨花区雨花区雨花区雨花区雨花区雨花区', '雨花区', '雨花区']
				],
				page: 1,
				loading: true,
				totalPage: 0,
				loadTitle: ''
			}
		},
		mounted() {
			// uni.$emit('onReachBottom', () => {
			// 	if (this.page >= this.totalPage) return
			// 	this.page += 1;
			// 	this.getList('')
			// })
			this.getList('');
			this.getIndustryList();
			this.getOnRj();
		},
		watch: {
			city(val) {
				this.page = 1;
				this.loading = true;
				this.getList('')
			},
			refsh() {
				this.page = 1;
				console.log("this.city", this.city)
				this.loading = true;
				this.getList('')
			}
		},
		methods: {
			changeRecently(index){
					this.recentlyOn=index;
					this.getIndustryList()
			},
			//获取我的招工求职
			async getOnRj() {
				try {
					let {
						data
					} = await getObjectListApi({
						limit: 20
					});
					let r = data.list[0].list.map(item => ({
						...item,
						type: 0
					}))
					let j = data.list[1].list.map(item => ({
						...item,
						type: 1
					}))
			
					this.needsList = [...r,...j];
					console.log('我的招工求职', this.needsList)
				} catch (e) {}
			},
			needsSwiperChange(e) {
				// console.log(e)
				this.demandIdx = e.detail.current;
			},
			toVisitor(data) {
				
				uni.navigateTo({
					url: "/pages/aboutUsers/aboutUsers/visitor?mind=&data=" + JSON.stringify(data)
				})
			},
			toMore(industry) {
				
				uni.navigateTo({
					url: "/pages/others/job/job?category="+this.recentlyList[this.recentlyOn].id+'&industry='+(industry?industry:'')
				})
			},
			//跳转个人主页
			toDetail(item) {
				let that = this;
				if (item.publisher && parseInt(item.publisher) && item.publisher != item.contacts[0].uid) {
					uni.showModal({
						title: '提示',
						content: '当前人不是发布人,是否跳转到发布人首页',
						confirmText: '跳发布人',
						cancelText: '跳当前人',
						success: function(res) {
							let id = ''
							if (res.confirm) {
								id = item.publisher;
							} else if (res.cancel) {
								id = item.contacts[0].uid
							}
							uni.navigateTo({
								url: '/pages/details/merchantInfo/merchantInfo?type=personal&id=' + id,
								events: {
									fanss(data) {
										that.fansOpear(data.info, data.callback);
									}
								}
							})
						}
					});
					return;
				}
				if (item.contacts && item.contacts.length > 0) {
					uni.navigateTo({
						url: '/pages/details/merchantInfo/merchantInfo?type=personal&id=' + item.contacts[0].uid,
					})
					return;
				}
				this.$util.Tips({
					title: '暂未获取到联系人'
				})

			},
			//获取类别列表
			async getIndustryList() {

				try {
					// let {
					// 	data

					// } = await classificationList();

					// this.tabTitle = data
					let numData = await getRecruitCategoryNum({
						status: this.recentlyList[this.recentlyOn].id == 1? 1:2,
						city: this.$city
					});
					this.tabTitle = numData.data
					console.log("numData",numData)
					this.$forceUpdate()
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			toPages(path) {
				uni.navigateTo({
					url: path
				})
			},
			filterClick() {
				this.show = !this.show;
				this.filtrateShow = true
			},
			filtrateConfirm() {
				// if (this.isNeedChangeTitle) {
				// 	this.updateArr.splice(this.currentIndex, 1, this.aceaConterArr[this.currentFiltrateAsideIndex][this.currentFiltrateConterIndex])
				// }
				this.show = false
			},
			filtrateReset() {
				this.show = false
			},
			// 导航栏点击
			cataTabClick(index, item) {
				if (this.tabTitle.length >= 5) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				this.categoryOn = index //设置导航点击了哪一个
				this.isLeft = index * this.isWidth //设置下划线位置
				this.loading = true
				this.getList(item.id)
			},
			async getList(industry) {
				this.loadTitle = ''
				try {
					let params = {
						limit: 10,
						page: this.page,
						industry: this.tabTitle[this.categoryOn] ? this.tabTitle[this.categoryOn].id : ''
					}
					let res = this.recentlyOn == 0 ? await getRecruitList({
						...params,
						city: this.$city,
						...this.$location,
					}) : await getRecruitLatesApi({
						...params
					})

					this.visitInfo = res.data.list;
					// this.visitInfo = res.data.list.map(item => {
					// 	item.jobMark = item.jobMark ? item.jobMark.split(',') : [];
					// 	item.distance = (item.distance * 0.001).toFixed(2);
					// 	return item
					// });
					if (this.visitInfo.length < 1) {
						this.loadTitle = '暂无数据'
					}
					this.totalPage = res.data.totalPage
					this.loading = false
					console.log('items', res)
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				} finally {

				}
			},
			toContact(contactas) {
				if (!contactas || contactas.length < 1) {
					this.$util.Tips({
						title: '未获取到联系人'
					})
					return;
				}
				getApp().globalData.into_singleChatRoom(contactas[0].contactPhone)
			},
			toCollect(status) {
				// this.isLove = status;
				// console.log('status',status)
				let that = this;
				let d = {
					status,
					type: 3,
					id: that.dataList.id
				}
				if (status) {
					d.title = that.dataList.title
				}
				getApp().globalData.toCollect(d, (res) => {
					that.existsIsLove(res.id);
				})


			},
			existsIsLove(id) {
				let that = this;
				getApp().globalData.existsIsLove({
					id,
					type: 3
				}).then(res => {
					console.log('appExistsLove', res)
					that.isLove = res;
				})
			}
		}
	}
</script>

<style lang="scss">
	.filtration {
		margin: 120rpx 32rpx 6rpx;
		background: #ffffff;
		padding: 24rpx;

		.category {
			.category-list {
				width: calc(100% - 152rpx);
				height: 76rpx;

				.item {
					display: inline;
					line-height: 76rpx;
					padding-right: 36rpx;
					white-space: nowrap;
					font-size: 32rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);
				}

				.item-on {
					font-weight: 500;
					color: rgba(238, 33, 45, 1);
				}
			}

			.more-btn {
				width: 132rpx;
				height: 76rpx;
				border-radius: 0px 4rpx, 0px, 0px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 4rpx 0px rgba(0, 0, 0, 0.08);
				text-align: center;
				font-size: 22rpx;
				font-weight: 400;
				color: rgba(56, 56, 56, 1);

				.add-icon {
					font-size: 36rpx;
				}
			}
		}

		.filtration-menu {
			margin-top: 12rpx;

			.recently-list {
				view {
					margin-right: 16rpx;
				}

				.recently {
					width: 110rpx;
					height: 48rpx;
					border-radius: 4rpx;
					border: 1px solid rgba(229, 229, 229, 1);
					text-align: center;
					line-height: 48rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(128, 128, 128, 1);
				}

				.recently-on {
					width: 110rpx;
					height: 48rpx;
					border-radius: 4rpx;
					border: 1px solid rgba(238, 33, 45, 1);
					background: rgba(238, 33, 45, 1);
					text-align: center;
					line-height: 48rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}

			.filter-btn {
				width: 132rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(56, 56, 56, 1);

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 12rpx;
				}
			}
		}
	}

	// 列表
	.list {
		padding: 32rpx;

		.item {
			margin-bottom: 32rpx;
			border-radius: 10rpx;
			background: #ffffff;
			padding: 24rpx;
			overflow: hidden;

			.top-info {
				margin-bottom: 16rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(191, 186, 186, 1);

				.close {
					font-size: 36rpx;
				}
			}

		}
	}

	.redruit-list {
		.title {
			width: 80%;
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(56, 56, 56, 1);
		}

		.price {
			font-size: 36rpx;
			font-weight: 500;
			color: rgba(238, 33, 45, 1);
		}

		.goods-tag {
			margin-top: 18rpx;

			.tag {
				white-space: nowrap;
				border-radius: 4px;
				background: rgba(255, 232, 234, 1);
				padding: 6rpx 12rpx;
				margin-right: 12rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
			}

			.tag:last-child {
				margin-right: 0;
			}
		}

		.contact-info {
			width: 70%;

			image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
			}

			.name {
				width: calc(100% - 100rpx);
				height: 70rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(128, 128, 128, 1);
				margin-left: 24rpx;
			}
		}

		.visit-l {
			width: 30%;

			.visit-num {
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);
				margin-bottom: 12rpx;
			}

			.visit-btn {
				width: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				opacity: 1;
				border-radius: 30rpx;
				background: rgba(238, 33, 45, 1);
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}

		.distance {
			width: 100%;
			padding: 0 12rpx 12rpx;
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(166, 166, 166, 1);

			image {
				width: 18rpx;
				height: 24rpx;
				margin-right: 6rpx;
			}
		}

		// 浏览咨询统计
		.visit-box {
			padding: 30rpx 0;
			margin-top: 30rpx;
			border-top: 1px solid rgba(238, 238, 238, 1);

			.visit-advtar {
				width: 40%;
				height: 46rpx;
				position: relative;

				image {
					width: 46rpx;
					height: 46rpx;
					border-radius: 50%;
					position: absolute;
				}
			}

			.visit-l {
				width: 60%;
				height: 46rpx;

				.visit-num {
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
				}
			}

		}

	}

	/* 筛选 */
	.filtrate-box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #ffffff;
		z-index: 1999;
	}

	.filtrate-box .aside {
		padding-top: 24rpx;
		position: absolute;
		left: 0;
		top: 0;
		width: 200rpx;
		height: calc(100% - 100rpx);
		left: 0;
		bottom: 100rpx;
		background: #F8F8F8;
		/* background-color: #f7f7f7;
		overflow-y: auto;
		overflow-x: hidden; */
	}

	.filtrate-box .aside .dropdown-item {
		height: 88rpx;
		padding-left: 24rpx;
		font-size: 28rpx;
		background-color: #ffffff;
		margin-bottom: 12rpx;
		max-width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.filtrate-box .conter {
		height: calc(100% - 100rpx);
		position: absolute;
		margin: 0rpx 0 0 200rpx;
		padding: 24rpx 14rpx;
	}

	.filtrate-box .conter .dropdown-item {
		display: inline-block;
		width: 46%;
		background-color: #f6f6f6;
		margin-bottom: 18rpx;
		border-radius: 4rpx;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.filtrate-box .conter .dropdown-item:nth-child(2n) {
		margin-right: 18rpx;
	}

	.filtrate-box .conter .conter-title {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
	}

	.filtrate-box .conter .dropdown-item.on {
		background: rgba(255, 247, 248, 1);
		color: rgba(238, 33, 45, 1);
	}

	.filtrate-box .filtrate-btn {
		width: 100%;
		height: 100rpx;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.filtrate-box .filtrate-btn .reset {
		width: 35%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #4b4b4b;
		background: #F5F6FA;
	}

	.filtrate-box .filtrate-btn .confirm {
		width: 65%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #ffffff;
		background: #EE212D;
	}

	.service {
		.service-list {
			margin-top: 28rpx;
			padding-bottom: 32rpx;
			/* 声明一个容器 */
			display: grid;
			/* 声明列的宽度,数字3表示的重复3次，即有3列宽度为200px*/
			grid-template-columns: repeat(4, 20%);
			/* 声明行间距和列间距 */
			grid-gap: calc(20% / 4);

			/* 分别表示两行的高度 */
			// grid-template-rows: 100px 200px;
			.service-item {
				text-align: center;
				background-size: 100% 100%;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				view {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);
				}
			}
		}
	}
	.module-box2 {
		background: #ffffff;
		border-radius: 10rpx 10rpx 0 0;
		margin: 28rpx 32rpx 26rpx;
		padding: 36rpx;
	
		.module-title {
			padding-left: 18rpx;
			position: relative;
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
	
			&::after {
				display: block;
				content: '';
				position: absolute;
				top: 50%;
				left: 0;
				margin-top: -15rpx;
				width: 6rpx;
				height: 30rpx;
				opacity: 1;
				border-radius: 30rpx;
				background: rgba(238, 34, 46, 1);
	
			}
		}
	}
</style>